<template>
	<div class="information">
		
		
		<div class='head'>
            <p class='title-icon'>
            	<a class='iconfont icon-jiantouzuo' href="javascript:history.go(-1)"></a>
            </p>
            <p class='title-text'>个人资料</p>
            <p class="title-null">保存</p>
        </div>
        
        <div class="avatar">
        	<p class="ava-img-p">
        		<img class="ava-img" src="../assets/img/img_1.png" alt="" />
        		<span class="ava-text">编辑头像</span>
        	</p>
<!--        	<p class="ava-text-p"></p>-->
        	<p class="ava-icon-p"><span class="ava-icon gray iconfont icon-iconfontjiantouyou"></span></p>
        	
        </div>
        
        <div class="info-all">
        	<p class="gray">
        		<span class="text-left">手机号</span>
        		<span>1554263245</span>
        	</p>
        	<p class="gray">
        		<span class="text-left">工号</span>
        		<span>川JA0251</span>
        	</p>
        </div>
		
		<div class="info-all">
			<p>
        		<span class="text-left">姓名</span>
        		<span>张绍</span>
        	</p>
        	<p>
        		<span class="text-left">地址</span>
        		<span>遂宁市香林南路19号</span>
        	</p>
        	<p>
        		<span class="text-left">生日</span>
        		<span>1996-09-30</span>
        	</p>
        	<p>
        		<span class="text-left">性别</span>
        		<span>保密</span>
        	</p>
		</div>
	</div>
</template>

<script>
</script>

<style scoped>
	.gray{
		color: #CCCCCC;
	}
	.title-null{
		color: #71B4EB;
		text-align: right;
	}
	.avatar{
		display: flex;
		height: 80px;
		line-height: 80px;
		background-color: white;
		margin-top: 30px;	
	}
	.ava-img{
		height: 60px;
		width: 60px;
		border-radius: 50%;
/*		margin-top: 10px;*/
		margin-left:20px;
		margin-right: 20px;
		vertical-align: middle;
	}
	.ava-img-p,.ava-text-p{
		width: 80%;
		height: 80px;
		line-height: 80px;
	}
	.ava-icon-p{
		width: 20%;
		text-align: right;
		padding-right: 15px;
	}
	.info-all{
		background-color: white;
		margin-top: 30px;
	}
	.info-all > p{
		border-bottom: 1px #EBEBEB solid;
		padding: 10px;
	}
	.text-left{
		display: inline-block;
		width: 20%;
		color: #CCCCCC;
	}
</style>